<template>
  <!-- 柱状图 -->
  <div class="echartBar" ref="barLine"></div>
</template>

<script>
export default {
  components: {},
  props: ['chartData'],
  data () {
    return {}
  },
  computed: {},
  watch: {
    'chartData': {
      handler() {
        if (JSON.stringify(this.chartData)!='{}') {
          this.getEchartData();
        }
      },
      deep: true
    }
  },
  created () {},
  mounted() {
    this.$nextTick(() => {
      this.getEchartData();
    })
  },
  methods: {
    getEchartData() {
      let myChart = this.$echarts.init(this.$refs.barLine);

      const xData = this.chartData.label;
      const data = this.chartData.value;
      console.log('xData::',xData);
      console.log('data::', data);
      
      let yAxisArr = [], seriesArr = [];
      data.forEach(item => {
        let yAxis = {
          name: "单位:%",
          type: "value",
          splitNumber: item.data.every(value => value <= 1)?1:6,
          nameTextStyle: {
            color: "#90BBDD",
            fontSize: 14,
            align: "center",
            padding: [0, 30, 0, 0],
          },
          axisLabel: {
            formatter: "{value}",
            color: "rgba(144, 187, 221, 1)",
            textStyle: {
              fontSize: 16,
              color: "#D5E1EB",
              lineHeight: 16,
            },
          },
          axisTick: {show: false},
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(33, 66, 128, 1)",
              type: "solid",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(33, 66, 128, 1)",
              type: "solid",
            },
          },
        }
        let series = {
          name: item.name,
          type: "bar",
          data: item.data,
          barWidth: 14,
          showBackground: true,
          backgroundStyle: {
            borderWidth: 1,
            borderColor: "rgba(16, 123, 184, 1)",
            color: "rgba(16, 123, 184, 0.2)",
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(62, 161, 255, 1)", },
              { offset: 1, color: "rgba(62, 161, 255, 0.1)", },
            ]),
            borderWidth: 1,
          },
        }
        yAxisArr.push(yAxis)
        seriesArr.push(series)
      })
      console.log('yAxisArr::',yAxisArr);
      console.log('seriesArr::', seriesArr);
      
      let option = {
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "4%",
          containLabel: true,
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center',
          itemGap: 90,
          // icon: 'circle', //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
          itemWidth: 20, // 设置图例图形的宽
          itemHeight: 10, // 设置图例图形的高
          textStyle: {
            fontFamily: 'Source Han Sans CN',
            fontWeight: 400,
            fontSize: 14,
            color: "#1D4A77",
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            color: "#F0F9FF",
            align: "left",
          },
          backgroundColor: "rgba(37, 89, 187, 1)", //设置背景颜色
          borderColor: "transparent",
          confine: false,
          formatter: function (params) {
            var str = params[0].name ;
            params.filter(function (item) {
              console.log('item::',item);
              if (item.seriesName != '') {
                if (item.componentSubType == "bar") {
                  str += "<br/>" + item.seriesName + "：" + item.value + '%';
                }
              }
            });
            return str;
          },
        },

        dataZoom: [
          {
            show: xData.length > 7,
            // 设置滚动条类型
            type: "slider",
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 22,
            // 设置滚动条宽度，相对于盒子宽度
            width: "92%",
            // 设置滚动条高度
            height: 3,
            // 设置滚动条显示位置
            left: "8%",
            // dataZoom-slider组件离容器下侧的距离
            bottom: 0,
            // 设置选中范围的填充颜色
            fillerColor: "#449FED",
            // 设置边框颜色
            borderColor: "rgba(19, 120, 172, 1)",
            // 设置背景颜色
            backgroundColor: "#00F5FE",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            //是否显示数据阴影 默认auto
            showDataShadow: false,
            brushSelect: false,
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // empty：当前数据窗口外的数据，被设置为空，即不会影响其他轴的数据范围
            filterMode: "empty",
            // 控制手柄的尺寸
            handleSize: 0,
            moveHandleStyle: {
              opacity: 0,
            },
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
            startValue: 0,
            endValue: 22,
          },
        ],

        xAxis: {
          type: "category",
          data: xData,
          splitLine: {show: false},
          axisTick: {show: false},
          splitArea: {show: false},
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(33, 66, 128, 1)",
            },
          },
          axisLabel: {
            color: "#D5E1EB",
            interval: 0,
            fontSize: "16px",
            align: "center",
            formatter: function (value) {
              return value.length > 4 ? value.slice(0, 4) + '...' : value; // 只显示前4个字符，并添加省略号
            }
          },
        },

        // yAxis: [
        //   {
        //     name: "单位:%",
        //     type: "value",
        //     splitNumber: yData1.every(value => value <= 1)?1:6,
        //     nameTextStyle: {
        //       color: "#90BBDD",
        //       fontSize: 14,
        //       align: "center",
        //       padding: [0, 30, 0, 0],
        //     },
        //     axisLabel: {
        //       formatter: "{value}",
        //       color: "rgba(144, 187, 221, 1)",
        //       textStyle: {
        //         fontSize: 16,
        //         color: "#D5E1EB",
        //         lineHeight: 16,
        //       },
        //     },
        //     axisTick: {show: false},
        //     axisLine: {
        //       show: true,
        //       lineStyle: {
        //         color: "rgba(33, 66, 128, 1)",
        //         type: "solid",
        //       },
        //     },
        //     splitLine: {
        //       show: true,
        //       lineStyle: {
        //         color: "rgba(33, 66, 128, 1)",
        //         type: "solid",
        //       },
        //     },
        //   },
        // ],

        yAxis: yAxisArr,

        // series: [
        //   {
        //     name: '增速',
        //     type: "bar",
        //     data: yData1,
        //     barWidth: 14,
        //     showBackground: true,
        //     backgroundStyle: {
        //       borderWidth: 1,
        //       borderColor: "rgba(16, 123, 184, 1)",
        //       color: "rgba(16, 123, 184, 0.2)",
        //     },
        //     itemStyle: {
        //       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //         { offset: 0, color: "rgba(62, 161, 255, 1)", },
        //         { offset: 1, color: "rgba(62, 161, 255, 0.1)", },
        //       ]),
        //       borderWidth: 1,
        //     },
        //   },
        //   {
        //     name: "",
        //     type: "scatter",
        //     data: yData1,
        //     emphasis: { scale: false },
        //     symbol: 'rect',
        //     symbolSize: [10, 2], // 进度条白点的大小
        //     itemStyle: {
        //       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //         { offset: 0,  color: "#FFFFFE", },
        //         { offset: 1, color: "#FFFFFE", },
        //       ], false),
        //       shadowColor: '#FFFFFE',
        //       shadowBlur: 1,
        //       borderWidth: 1,
        //       borderColor:'#FFFFFE',
        //       barBorderRadius: 0,
        //     },
        //     z: 2,
        //   },
        // ],

        series: seriesArr
      };
      // myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // 动态显示值
      if(option && typeof option === "object") {
        myChart.setOption(option, true);
        let idx = 0; //播放所在下标
        let mTime = setInterval(function () {
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: idx,
          });
          idx ++;
          if(idx >= xData.length) {
            idx = 0;
          }
        }, 3000);
      };
    }
  },
}
</script>

<style lang="scss" scoped>
.echartBar {
  width: 100%;
  height: 100%;
}
</style>